<template>
  <div>
    <div class="pages-certificate" v-if="!sub">
      <div class="head">
        <div class="search-data-box">
          <span class="demonstration">服务商性质</span>
          <el-select v-model="searchData.serviceNature" placeholder="请选择" size="small" @change="changeService(searchData.serviceNature)">
            <el-option
              v-for="item in serviceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span>企业名称</span>
          <el-select v-model="searchData.company" filterable clearable  placeholder="请选择" size="small">
            <el-option
              v-for="item in companyOptions"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
        <div class="button-box">
          <el-button type="primary" size="small" @click="getList()">查询</el-button>
          <el-button type="primary" size="small" @click="addProducer(0)">添加服务商</el-button>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="50" label="序号">
          <template slot-scope="scope">
             <span>{{scope.$index+ pageData.pageSize*(pageData.currentPage -1) +1}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="name" label="企业名称" width="180"></el-table-column>
        <el-table-column prop="linkName" label="联系人" width="180"></el-table-column>
        <el-table-column prop="linkMobile" label="手机号码"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" :formatter="trunTime"></el-table-column>
        <el-table-column prop="inviteCode" label="邀请码"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">启用</span>
            <span v-if="scope.row.status == 1">禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addProducer(1,scope.row.id)">查看</el-button>
            <el-button type="text" size="small" @click="addProducer(2,scope.row.id)">编辑</el-button>
            <el-button
              type="text"
              size="small"
              v-if="scope.row.status == 1"
              @click="changeStatus(0,scope.row.id)"
            >启用</el-button>
            <el-button
              type="text"
              size="small"
              v-if="scope.row.status == 0"
              @click="changeStatus(1,scope.row.id)"
            >停用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <page-unit :pageData="pageData" :func="getList"></page-unit>
    </div>
    <div class="pages-certificate" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>


<script>
import { mapState } from "vuex";
import state from "@/util/state";
import util from "@/util";
import pageUnit from "@/components/Page";
import { providerList, updateProvideStatus } from "@/api";
export default {
  computed: mapState(["merchantId", "sub", "power"]),
  components: { pageUnit },
  name: "serviceProvider-list",
  data() {
    return {
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      searchData: {
        serviceNature: "",
        company: ""
      },
      tableData: [],
      serviceOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "公司"
        },
        {
          value: "1",
          label: "个人"
        }
      ],
      companyOptions: []
    };
  },
  created() {
    this.getOptionList('');
  },
  mounted() {
    this.getList();
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.getList();
        }
      },
      deep: true
    }
  },
  methods: {
    changeService(index){
      this.searchData.company = ""
      this.pageData.currentPage = 1
      this.getOptionList(index)
      this.getList();
    },
    trunTime(row, column, cellValue) {
      return util.getdatetime(cellValue);
    },
    getList() {
      let data = {
        shopId: this.merchantId,
        serviceType: 2,
        serviceProviderNature: this.searchData.serviceNature,
        name: this.searchData.company,
        pageNum: this.pageData.currentPage,
        pageSize: this.pageData.pageSize
      };

      providerList(data).then(res => {
        this.tableData = res.data.list;
        this.pageData.totalItems = res.data.totalRecord;
      });
    },
    getOptionList(serviceProviderNature,name) {
      providerList({
        shopId: this.merchantId,
        serviceType: 2,
        serviceProviderNature: serviceProviderNature,
        name: name,
        pageNum: this.pageData.currentPage,
        pageSize: this.pageData.pageSize
      }).then(res => {
        this.companyOptions = res.data.list;
      });
    },
    addProducer(status, id) {
      // 0 -添加, 1 查看 2 - 编辑
      util.routerTo(
        "/training-center/serviceProvider/serviceProvider-list/serviceProvider-details",
        { status: status, id: id }
      );
    },
    changeStatus(status, id) {
      // 0 启用 1 禁用
      let tipMessage = "是否确认停用该服务商，停用后该服务商将无法分润";
      if (status == 0) {
        tipMessage = "是否确认启用该服务商";
      }
      this.$confirm(tipMessage, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        console.log(12313);
        updateProvideStatus({
          id: id,
          status: status
        }).then(res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功!"
            });
            this.getList();
          }
        });
      });
    }
  }
};
</script>

<style scoped  lang="less">
.pages-certificate {
  background: #fff;
  padding: 10px;
  margin-top: 10px;
}
.head {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  margin-bottom: 40px;
}
.el-select {
  margin: 0 10px;
}
</style>
